<template>
	<view class="group-chat">
		<uni-nav-bar dark left-text="取消" :fixed="true" :right-width="40" right-text="" title="消息" background-color="#fff" :border="false" color="#262E3F" @clickLeft="cancel()" @clickRight="checkbox()" />
        <view class="search-view">
			<view class="search-box">
				<uni-icons customPrefix="iconfont" type="icon-sousuo" size="32rpx"></uni-icons>
				<input class="input" type="text" :value="searchText" :focus="searchFocus" @input="searchInput" placeholder="搜索" placeholder-style="color: #d7d7d7;" confirm-type="search" @confirm="search()">
			</view>
		</view>
		<view class="list">
			<view class="cl-item" @click="sendMsg(item)" v-for="(item, i) in recentContacts" :key="i">
				<view class="head-portrait">
					<image :src="headHandle(item)" mode="aspectFill"></image>
					
				</view>
				<view class="time-info">
					<view class="name-cont" v-if="item.gradeId&&item.notice">
						<view class="time-name">
							<view>
								<text class="name">{{gradeMap[item.gradeId]}}</text>
								<text class="tag tag-official">官方</text>
							</view>
						</view>
						
					</view>
					<view class="name-cont" v-else>
						<view class="time-name">
							<view>
								<text class="name">{{item.name}}</text>
								<text class="tag" v-if="!item.userType">群聊</text>
							</view>
						</view>
						
					</view>
				</view>				
			</view>
		</view>
        <uni-transition mode-class="fade"
			:styles="trans_bg" :show="share_tips" @click="share_tips=false">
		</uni-transition>
		<uni-transition mode-class="fade"
			:styles="fade_class"
			:show="share_tips">
			<view class="share-tips popup-top">
				<view class="" style="margin: 0 24rpx;">
					<view class="title">
						发送给：
					</view>
					<view class="head-name">
						<image class="head" :src="headHandle(shareInfo)" mode="aspectFill"></image>
						<text class="name">{{shareInfo.name}}</text>
					</view>
                    <view class="content" v-if="shareInfo.msgType==8">
                        <text v-for="(file, index) in JSON.parse(shareInfo.content)" :key="index">
                            {{JSON.parse(shareInfo.content)[index].name}}
                        </text>
                    </view>
					<view class="content" style="display: flex;" v-else-if="shareInfo.msgType==6&&JSON.parse(shareInfo.content).comeFrom">
						[链接]<text-editor :id-name="`editordetali`" :read-only="true" 
							:info="{content: JSON.parse(shareInfo.content).text, className: 'ql-container-share', height: 'auto'}"></text-editor>
					</view>
					<view class="content" v-else-if="shareInfo.msgType==6">
						{{JSON.parse(shareInfo.content).text}}
					</view>
					<view class="content" v-else-if="shareInfo.msgType==0">
						{{shareInfo.content}}
					</view>
					<view class="content" v-else>
						{{shareInfo.msgType==1?'[图片]':shareInfo.msgType==2?'[语音]':shareInfo.msgType==3?'[视频]':shareInfo.msgType==7?'[表情]':shareInfo.content}}
						
					</view>
                    <!-- <view class="picture-list" v-else-if="shareInfo.msgType==1">
                        <text v-for="(url, index) in JSON.parse(shareInfo.extras).dst_path" :key="index" @click.stop="viewImage(shareInfo, index)">
                            [图片]
                        </text>
                    </view>
                    <view class="voice-content" v-else-if="item.msgType==2" @click.stop="playVoice(JSON.parse(item.extras).dst_path[0])">
                        <uni-icons customPrefix="iconfont" :type=" wsToId == item.from?'icon-yuyin1':'icon-yuyin2'" ></uni-icons>
                    </view>
                    <view class="video-content" v-else-if="item.msgType==3">
     
                        <zy-video 
                            :ref="'videoRef'+i"
                            :refi="'videoRef'+i"
                            @playVideo="playVideo"
                            :src="JSON.parse(item.extras).dst_path&&JSON.parse(item.extras).dst_path[0]"></zy-video>
         
                    </view>
                    <view class="picture-list" v-else-if="item.msgType==7">
                        <view><image :src="utils.emojiPicture[item.content].src" mode="aspectFil"></image></view>
                        <text>[表情]</text>
                    </view>
                    
                    <view class="file-list" v-else-if="shareInfo.msgType==8">
                        <view v-for="(file, index) in JSON.parse(item.content)" :key="index">
                            <zy-file :src="file.path" :name="JSON.parse(item.content)[index].name" :size="JSON.parse(item.content)[index].size"></zy-file>
                        </view>
                    </view> -->
				</view>
				<view class="cancel-confirm">
					<text @click="share_tips=false">取消</text>
					<text class="confirm" @click="confirmSend()">确定</text>
				</view>
			</view>
		</uni-transition>
	</view>
</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import textEditor from '../student/components/text-editor.vue'
	export default {
		components: {
			textEditor,
			uniNavBar
		},
		data(){
			return {
				userInfo: {},
				gradeMap: {},

				all_friend_list: [],
                recentContacts: [],
				showModule: false,
                searchFocus: false,
                searchText: '',
                share_tips: false,
                trans_bg: {
					position: 'fixed', 
					top: 0, 
					/* #ifdef H5 */
					left: 'var(--window-left)',
					right: 'var(--window-right)',
					/* #endif */
					/* #ifndef H5 */
					left: 0,
					right: 0,
					/* #endif */
					height: '100%', 
					background: 'rgba(0, 0, 0, .6)', 
					'z-index': 9
				},
                fade_class: {
					position: 'absolute',
					'z-index': 9
				},

                shareInfo: {},
			}
		},
		onShow(){
			this.getfindChatSession()
		},
		onLoad(){
            this.shareInfo = uni.getStorageSync('xdrelayMsg')
			

			this.userInfo = getApp().globalData.userInfo;
		},
		methods: {
            cancel(){
                uni.navigateBack({
                    delta: 1
                })
            },
			search(){
                let list = [];
                for(let i=0; i<this.all_friend_list.length; i++){
                    let info = this.all_friend_list[i]
                    if(info.name.indexOf(this.searchText)!=-1){
                        list.push(info)
                    }
                }
                this.recentContacts = list
				console.log(132, this.searchText)
                
            },
			checkbox(){
				console.log('多选')
			},
			headHandle(info){
				// 处理头像显示
				let str = ''
				let sex = info.sex>0 ?info.sex : 1

				str = info.userType&&info.avatarUrl?this.api.xiaodeObsUrl+info.avatarUrl:''
				console.log(177, info)
				if(!str){
					str = info.userType?`/static/${info.userType==1?`stu${sex}`:'te1'}.png`:info.type==1?'/static/u16.png':info.type==5?'/static/txl/qlx.png':info.notice?'/static/notice.png':'/static/txl/qlx2.png'
				}
				return str;
			},
			getfindChatSession(){
				
				// this.all_friend_list = uni.getStorageSync('xiaode_friend_list')
                // this.gradeMap = {1: '高一', 2: '高二', 3: '高三'}
                // this.recentContacts = this.all_friend_list
            	this.api.get('chatGroupManage/findChatSession').then(res=>{
					if(res.data.state !='ok')return
					let userInfo = getApp().globalData.userInfo;
	
					// this.userInfo = userInfo
					this.all_friend_list = res.data.friends.concat(res.data.schoolChatGroup, res.data.familyChatGroup, res.data.commonChatGroup, res.data.exampleGroup);
					
					this.recentContacts = this.all_friend_list
				})

			},
            searchInput(e){
                this.searchText = e.detail.value;
                
                this.search()
            },
			sendMsg(item){
				// 发送消息
                this.share_tips = true;
				this.shareInfo = Object.assign(this.shareInfo, item)
				// this.shareInfo.name = item.name
				// this.shareInfo.type = item.type || ''
				// this.shareInfo.userType = item.userType || ''
				
				// if(this.shareInfo.msgType==6){
					
				// 	return
				// }
                this.shareInfo.to = item.userType?item.accountId:item.id
			},
            confirmSend(){
                let info = this.shareInfo
                let idName = info.userType?'to':'groupId'
                let data = {
					"requestEventType": idName=='groupId'?2:1,
					"msgType": info.msgType, 
					"content" : info.content, 
					"extras": {}
				}
                data[idName] = info.to
                console.log(184, data)
				// return
				uni.sendSocketMessage({
					data: JSON.stringify(data),
					success: ()=>{
						
						this.utils.showToast('已发送')
						if(info.msgType==6&&JSON.parse(info.content).taskId){
							this.shareContent(JSON.parse(info.content))
							return
						}
						this.cancel()
					}
				});
            },
			shareContent(info){
				this.api.post('task/shareContent', {
					id: info.taskId,
					type: info.taskType
				}).then(res=>{
					if(res.data.state != 'ok') return
					this.cancel()
				})
			}
		}
	}
</script>
<style lang="less" scoped>
    .search-view{
		padding: 40rpx 28rpx;
		background-color: #fff;
	}
	.search-box{
		
		padding: 0 20rpx;
		height: 34px;
		display: flex;
		align-items: center;
		border: 2rpx solid #d7d7d7;
		border-radius: 10rpx;
		font-size: 26rpx;
		.input{
			width: 84%;
			margin: 0 24rpx;
			font-size: 26rpx;
		}
	}
	.group-chat{
		overflow: hidden;
		.flex{
			display: flex;
			align-items: center;
		}
		.head{
			width: 60rpx;
			height: 60rpx;
		}
		.you{
			width: 28rpx;
			height: 28rpx;
		}
		.list{
			padding: 24rpx 0;
			position: relative;
			&::after{
				position: absolute;
				content: '';
				width: 200%;
				left: 0;
				height: 2rpx;
				top: 0;
				background: #EEEEEE;
				transform: scale(0.5) translateX(-50%);
			}
		}
		.title{
			padding: 0 32rpx;
			height: 58rpx;
			line-height: 58rpx;
			font-size: 24rpx;
			color: #7f7f7f;
			background: #f2f2f2;
		}
		.cl-item{
			display: flex;
			align-items: center;
			height: 120rpx;		
			.time{
				font-size: 24rpx;
				color: #BCBCBC;
				white-space: nowrap;
			}
		}
		.head-portrait {
			position: relative;
			margin: 0 32rpx;
			font-size: 0;
			image{
				border-radius: 44rpx;
				width: 88rpx;
				height: 88rpx;
			}
			
		}
		.name-cont{
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			
			font-size: 28rpx;
			box-sizing: border-box;
		}
		.time-info{
			display: flex;
			align-items: center;
			justify-content: space-between;
			width:  calc(100% - 184rpx);
			position: relative;
			&::after{
				position: absolute;
				content: '';
				width: 200%;
				left: 0;
				height: 2rpx;
				bottom: 0;
				background: #EEEEEE;
				transform: scale(0.5) translateX(-50%);
			}
		}
		.time-name{
			display: flex;
			justify-content: space-between;
			align-items: center;
			.tag{
				margin-left: 10rpx;
				border-radius: 4rpx;
				padding: 0 4rpx;
				line-height: 30rpx;
				font-size: 24rpx;
				color: #28C2CD;
				background: #D4F3EE;
			}
			.tag-official{
				color: #FA7F45;
				background: #FEE8DD;
			}
		}
		.content-num{
			margin-top: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.num{
				display: inline-block;
				padding: 0 8rpx;
				height: 40rpx;
				line-height: 40rpx;
				min-width: 40rpx;
				text-align: center;
				box-sizing: border-box;
				border-radius: 20rpx;
				background: #FA7F45;
				color: #fff;
				font-size: 24rpx;
				z-index: 8;
			}
			
			.cont{
				width: 86%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				height: 32rpx;
				line-height: 32rpx;
				// display: -webkit-box;
				// -webkit-line-clamp: 1;
				// -webkit-box-orient: vertical;
				font-size: 24rpx;
				color: #999;
			}
		}


		.scholl-group{
			.cl-item{
				
				height: 140rpx;
			}
			.time-info{
				border: none;
			}
		}
		.no-teacher{
			margin: 20rpx 0 ;
			text-align: center;
			font-size: 24rpx;
		}
	}
    .share-tips{
		position: fixed;
		
		background-color: #fff;
		border-radius: 10rpx;
		padding: 32rpx 16rpx 0;
		.title{
			
		}
		.head-name{
			margin-top: 32rpx;
		}
		.head{
			width: 56rpx;
			height: 56rpx;
			border-radius: 10rpx;
			margin-right: 24rpx;
		}
		.name{
			font-size: 26rpx;
			vertical-align: 16rpx;
		}
		.content{
			margin-top: 40rpx;
			font-size: 26rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.cancel-confirm{
			margin-top: 24rpx;
			border-top: 2rpx solid #f2f2f2;
			text{
				display: inline-block;
				width: 50%;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				box-sizing: border-box;
			}
			.confirm{
				border-left: 2rpx solid #f2f2f2;
				color: #55acee;
			}
		}
	}
</style>